<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>升学统计</title>
    <link rel="stylesheet" type="text/css" href="../plugin/layui/css/layui.css" />
    <script src="../js/echarts.js" type="text/javascript" charset="utf-8"></script>
    <script src="../plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['form','laydate','jquery'], function(){
            var form = layui.form,laydate=layui.laydate,$=layui.jquery;
            $.get("../statistic/terms",function (res) {
                var selector=document.getElementById("select");
                var option=document.createElement("option");
                option.innerText="请选择";
                selector.appendChild(option);
                for (var i=0;i<res.data.length;i++){
                    var option=document.createElement("option");
                    option.innerText=res.data[i].name;
                    option.value=res.data[i].index;
                    selector.append(option);
                };
                form.render("select");
            });
            $.get("../statistic/grades",function (res) {
                console.log(res)
                var selector=document.getElementById("sheetGrade");
                var option=document.createElement("option");
                option.innerText="请选择";
                selector.appendChild(option);
                for (var i=0;i<res.data.length;i++){
                    var option=document.createElement("option");
                    option.innerText=res.data[i].gradeType+res.data[i].beginyear+'届';
                    option.value=res.data[i].gaId;
                    selector.append(option);
                };
                form.render("select");
            });
            laydate.render({
                elem: '#year'
                ,type: 'year'
            });
            laydate.render({
                elem:'#startDate',
                type:'datetime'
            });
            laydate.render({
                elem:'#endDate',
                type:'datetime'
            });
            //监听提交
            form.on('submit(queryNum)', function(data){
                console.log(data);
                var term='';
                if (data.field.paperTerm==1){
                    term='高一上学期';
                }
                if (data.field.paperTerm==2){
                    term='高一下学期';
                }
                if (data.field.paperTerm==3){
                    term='高二上学期';
                }
                if (data.field.paperTerm==4){
                    term='高二下学期';
                }  if (data.field.paperTerm==5){
                    term='高三上学期';
                }
                if (data.field.paperTerm==6){
                    term='高三下学期';
                }
                var titleText="巴中市普通高级中学"+term+"统考预计升学人数";
                $.get("../statistic/nums",data.field,function (res) {
                    console.log(res);
                    var datax=[];
                    var datay=[];
                    var objdata=res.data;
                    for (let i in objdata) {
                        let o={};
                        o[i]=objdata[i];
                        datax[i]=o[i].key;
                        datay[i]=o[i].value;
                    }
                    console.log(datax);
                    console.log(datay);
                    var myecharts=echarts.init(document.getElementById("main"));
                    var option={
                        title:{
                            text:titleText
                        },
                        xAxis:{
                            name:'学历',
                            nameLocation: 'end',
                            data:datax
                        },
                        yAxis:{
                            name:'升学人数',
                            nameLocation: 'end',
                        },
                        series: [{
                            name: '升学人数',  // 系列名称
                            type: 'bar',  // 系列图表类型
                            data: datay // 系列中的数据内容
                        }]
                    };
                    myecharts.setOption(option);
                });
                return false;
            });
            form.on('submit(queryRate)', function(data){
                console.log(data);
                var term='';
                if (data.field.paperTerm==1){
                    term='高一上学期';
                }
                if (data.field.paperTerm==2){
                    term='高一下学期';
                }
                if (data.field.paperTerm==3){
                    term='高二上学期';
                }
                if (data.field.paperTerm==4){
                    term='高二下学期';
                }  if (data.field.paperTerm==5){
                    term='高三上学期';
                }
                if (data.field.paperTerm==6){
                    term='高三下学期';
                }
                var titleText="巴中市普通高级中学"+term+"统考预计升学率";
                $.get("../statistic/rate",data.field,function (res) {
                    console.log(res);
                    var dataResult=[];
                    for (var i=0;i<res.data.length;i++){
                        dataResult[i]={
                            value:'',
                            name:''
                        };
                        dataResult[i].value=res.data[i].value;
                        dataResult[i].name=res.data[i].key+res.data[i].value+"%";
                    };
                    console.log(dataResult);
                    var myecharts=echarts.init(document.getElementById("main1"));
                    var option={
                        title:{
                            text:titleText
                        },
                        series:[{
                            name:'分数占比',
                            type:'pie',
                            radius:'55%',
                            roseType:'angle',
                            data:dataResult,
                            itemStyle: {
                                normal: {
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    };
                    myecharts.setOption(option);
                })
                return false;
            });
        });
    </script>
</head>
<body>
<div>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">年级</label>
            <div class="layui-input-block">
                <select name="sheetGrade" lay-verify="required" id="sheetGrade"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学期</label>
            <div class="layui-input-block">
                <select name="paperTerm" lay-verify="required" id="select"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">高考分数线</label>
            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="year" placeholder="请选择年份" name="year">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试开始时间</label>
            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="startDate" placeholder="请选择考试开始时间" name="startDate">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">考试结束时间</label>
            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="endDate" placeholder="请选择考试结束时间" name="endDate">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="queryNum">预计升学人数</button>
                <button class="layui-btn" lay-submit lay-filter="queryRate">预计升学率</button>
            </div>
        </div>
    </form>
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="main1" style="width: 600px;height:400px;"></div>
</div>
</body>
</html>